<template>
     <div>
      <template>
        <el-dialog title="添加菜单" :visible.sync="dialogTableVisible" :close-on-click-modal="false" @close="close">
            <el-form>
                <el-form-item label="菜单类型" >
                    <!-- <div class="radio">
                    <el-radio-group v-model="type">
                        <el-radio label="0">目录</el-radio>
                        <el-radio label="1" @change="getTypeOne">菜单</el-radio>
                        <el-radio label="2" @change="getTypeTwo">按钮</el-radio>
                    </el-radio-group>
                    </div> -->
                    <el-radio v-model="menus.type" label="0" >目录</el-radio>
                    <el-radio v-model="menus.type" label="1" @change="getTypeOne">菜单</el-radio>
                    <el-radio v-model="menus.type" label="2" @change="getTypeTwo">按钮</el-radio>
                </el-form-item>
            </el-form>
            <el-form ref="menus" :model="menus" label-width="80px" v-show="menus.type==0">
                <el-form-item label="目录标题" prop="title">
                    <el-input v-model="menus.title" autocomplete="off" placeholder="中文;例: 系统管理" id="menusInput"></el-input>
                </el-form-item>
                <el-form-item label="目录标识" prop="name">
                    <el-input v-model="menus.name" autocomplete="off" placeholder="英文;例: System" id="menusInput"></el-input>
                </el-form-item>
                <el-form-item label="目录路径" prop="url">
                    <el-input v-model="menus.url" autocomplete="off" placeholder="例：/sys" id="menusInput"></el-input>
                </el-form-item>
                <el-form-item label="排序编号" prop="orderNum">
                    <el-input-number v-model="menus.orderNum" controls-position="right" @change="handleChange" :min="0" :max="10" placeholder="0" id="menusInput"></el-input-number>
                </el-form-item>
                <el-form-item label="目录图标" prop="icon">
                    <el-input v-model="menus.icon" autocomplete="off" placeholder="例: el-icon-setting" id="menusInput"></el-input>
                </el-form-item>
            </el-form>
            <el-form ref="menus" :model="menus" label-width="120px" v-show="menus.type==1">
                <el-form-item label="菜单标题" prop="title">
                    <el-input v-model="menus.title" autocomplete="off" placeholder="中文;例: 用户管理" id="menusInput"></el-input>
                </el-form-item>
                <el-form-item label="菜单标识" prop="name">
                    <el-input v-model="menus.name" autocomplete="off" placeholder="例: user" id="menusInput"></el-input>
                </el-form-item>
                <el-form-item label="上级菜单" prop="parentId">
                    <el-select v-model="menus.parentId" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                        <!-- <span>{{ item.title }}</span> -->
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否隐藏菜单" >
                    <el-switch
                    v-model="menus.hidden"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <el-form-item label="菜单路由" prop="url">
                    <el-input v-model="menus.url" autocomplete="off" placeholder="例: /sys/user" id="menusInput"></el-input>
                </el-form-item>
                <el-form-item label="排序编号" prop="orderNum">
                    <el-input-number v-model="menus.orderNum" controls-position="right" @change="handleChange" :min="0" :max="10" placeholder="0"></el-input-number>
                </el-form-item>
                <el-form-item label="菜单图标" prop="icon">
                    <el-input v-model="menus.icon" autocomplete="off" placeholder="例: el-icon-setting" id="menusInput"></el-input>
                </el-form-item>
            </el-form>
            <el-form ref="menus" :model="menus" label-width="80px" v-show="menus.type==2">
                <el-form-item label="按钮名称" prop="title">
                    <el-input v-model="menus.title" autocomplete="off" placeholder="中文;例: 添加" id="menusInput"></el-input>
                </el-form-item>
                <el-form-item label="上级菜单" prop="parentId">
                    <el-select v-model="menus.parentId" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="授权标识" prop="perm">
                    <el-input v-model="menus.perm" autocomplete="off" placeholder="例: sys:user:add" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取 消</el-button>
                <el-button type="primary" @click="insertMenus">确 定</el-button>
            </div>
        </el-dialog>
      </template>    
    </div> 
</template>

<script>
import http from '@/utils/request';
export default {
    inject: ['reload'],
    name: 'ThreeInsertMenus',
    data() {
        return {
            dialogTableVisible:false,
            options:[],
            value: '',
            menus:{
                type:'0'
            }
        };
    },
    mounted() {
      
    },

    methods: {

       async insertMenus(){
        //console.log(this.type);
        //console.log(this.value);
        //console.log(this.menus);
        const r =await http.post('/menu',this.menus)
        if(r.data.code>0){
            this.$message({
                            message: '添加成功',
                            type: 'success'
                        })
                        // 关闭模态框
                        this.dialogTableVisible = false
                        // 数据重新加载
                        this.$emit('refresh')
                        this.$refs.menus.resetFields()
        }
        this.menus.title=''
        this.menus.name=''
        this.menus.url=''
        this.menus.orderNum=''
        this.menus.icon=''
        this.menus.perm=''
        //this.$refs.menus.resetFields()
        //this.reload()
       },
       getTypeOne(){
         http.get(`/menu/parents/${this.menus.type-1}`)
          .then(res => {
            this.options=res.data.data
        })
        //this.$refs.menus.resetFields()
       },
       getTypeTwo(){
        http.get(`/menu/parents/${this.menus.type-1}`)
          .then(res => {
            this.options=res.data.data
        })
        //this.$refs.menus.resetFields()
       },
       close(){
        //this.$refs.menus.resetFields()
        //this.reload()
        this.menus.title=''
        this.menus.name=''
        this.menus.url=''
        this.menus.orderNum=''
        this.menus.icon=''
        this.menus.perm=''
       } 
    },
};
</script>

<style lang="scss" scoped>

</style>